import "../assets/index.css"
import {Button, Form, Input, message} from "antd";
import axios from "axios";
import {hostContext} from "../store/commonContext.jsx";
import {useContext} from "react";
import {useNavigate} from 'react-router-dom'
import cookie from "js-cookie"

const Index = () => {
    const navigate = useNavigate();
    const host = useContext(hostContext)

    const onSubmit = async (values) => {
        // 后端登录接口
        await axios.post(`${host}/oauth/login`, {
            userName: values.userName,
            password: values.password
        }).then(response => {
            // 成功->获取token、跳转登录
            if (200 === response.status && response.data.access_token !== undefined) {
                // 存储到cookie，后端可以拿到来控制数据可见性
                cookie.set('access_token', response.data.access_token)
                // 登录成功->调用self接口，将用户id存入cookie
                axios.get(
                    `${host}/oauth/self/name?userName=${values.userName}`,
                    {
                        headers: {'Authorization': 'Bearer ' + response.data.access_token}
                    }
                ).then(res => {
                    cookie.set('user_id', res.data.userId)
                })
                navigate('/charge')
                // 刷新一次，防止数据获取不到
                setTimeout(() => location.reload(), 500)
            } else {
                message.error(response.data.message);
            }
        })
    }

    return (
        <>
            <div id='index-background'>
                <div id='login-form'>
                    <Form
                        id="login"
                        style={{
                            maxWidth: 360,
                        }}
                        size={"large"}
                        /*onFinish用来监控submit后的动作*/
                        onFinish={onSubmit}
                    >
                        <Form.Item
                            /*label用来控制input前面的显示*/
                            label="账号："
                            /*name用来打印onFinish的values*/
                            name='userName'
                            rules={[
                                {
                                    required: true,
                                    message: '你是谁？',
                                },
                            ]}
                        >
                            <Input placeholder="Username"/>
                        </Form.Item>

                        <Form.Item
                            label="密码："
                            name='password'
                            rules={[
                                {
                                    required: true,
                                    message: '嗯？密码呢？',
                                },
                            ]}
                        >
                            <Input type="password" placeholder="Password"/>
                        </Form.Item>

                        <Form.Item>
                            <Button block type="primary" htmlType="submit">
                                Go~
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </>
    )
}
export default Index
